<template>
  <div class="search-container">
    <!-- 顶部的搜索篮筐 -->
    <!--
      Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。也就是在移动端显示搜索按钮
     -->
    <form action="/" class="search-from">
      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        background="#3296fa"
        @focus="isResultShow = false"
      />
    </form>

    <!-- 搜索结果 -->
    <search-result
      v-if="isResultShow"
      :search-text="searchText"
    ></search-result>
    <!-- /搜索结果  -->

    <!-- 联想建议 -->
    <search-suggestion
      v-else-if="searchText"
      :search-text="searchText"
      @search="onSearch"
    ></search-suggestion>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <search-history
      v-else
      :searchHistories="searchHistories"
      @clers-search-histories="searchHistories = []"
      @search="onSearch"
    ></search-history>
    <!-- /搜索历史记录 -->

    <!--
      搜索展示模块逻辑的js
      var a=10;
      if(a<10){
        console.log(1)
      }  else{
        if(a==10){
          console.log(2)
        }else{
          console.log(3)
        }
      }

      if(a<10){
        console.log(1)
      }else if(a==10){
        console.log(2)
      }else{
        console.log(3)
      }
    -->
  </div>
</template>
/*
  1.点击按钮进行发布评论 --------->ajax
  1.1点击事件
  1.2封装接口
  1.3调用接口
  2.数据添加页面 --------->list.unshift(数据)
    数据get ------->comment-post
    list get index.vue
  组件通信-组件传值 : comment-post ->index 子传父 $emit(事件名，数据) 事件名？ 自定义？ 父组件自定义？ @自定义
 */
<script>
import SearchHistory from './components/search-history.vue'
import SearchResult from './components/search-result.vue'
import SearchSuggestion from './components/srarch-suggestion.vue'
import { getItem, setItem } from '@/utils/storage.js'
export default {
  name: 'SearchIndex',
  data () {
    return {
      searchText: '',
      isResultShow: false, // 控制搜索结果的展示
      searchHistories: getItem('TOUTIAO_SEARCH-HISTORIES') || []
    }
  },
  watch: {
    searchHistories (value) {
      setItem('TOUTIAO_SEARCH-HISTORIES', value)
    }
  },
  components: {
    SearchHistory,
    SearchResult,
    SearchSuggestion
  },
  methods: {
    onSearch (val) {
      /* 搜索内容 */
      // console.log(val);
      /* 更新文本框的内容 */
      this.searchText = val
      // 控制搜索结果的展示
      this.isResultShow = true
      /* 搜索历史纪录，不要重复，最新的在最前面 */
      const index = this.searchHistories.indexOf(val)
      if (index !== -1) {
        this.searchHistories.splice(index, 1)
      }

      this.searchHistories.unshift(val)
      /* 渲染搜索结果 */
      this.isResultShow = true
    },
    onCancel () {
      /* 取消按钮 */
      this.$router.back()
    }
  }
}
</script>

<style scoped lang='less'>
.van-search {
  .van-search__action {
    color: #fff;
  }
  .search-from {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
  /deep/.van-nav-bar__title{
    max-width:0 !important;
  }
</style>
